<template>
	<view id="home">
		<view class="home-swiper">
			<u-swiper :height="200" :list="swiper"></u-swiper>
		</view>
		<view class="home-item">
			<u-cell-group :border="false">
				<u-cell title="环境分析"></u-cell>
				<view class="gk">
					<u-grid col="4" @click="onGridEnv">
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/rili.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">国控站点</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zszd.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">扬尘站点</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/warn_zs.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">噪声站点</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">	
								<u-badge show-zero type="warning" max="99" :value="count" absolute="true" :offset="[0, 0]"></u-badge>
								<u-image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png" width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">告警消息</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/sp2.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">视频管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/soil_icon.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">裸土覆盖</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wash_icon.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">车辆冲洗</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/dbsx.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">待办事项</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
		<view class="home-item grid-content">
			<u-cell-group :border="false">
				<u-cell title="巡查督办"></u-cell>
			</u-cell-group>
			<view class="patrol-item-box">
				<view class="patrol-item-in">
					<navigator class="inline" url="/packageB/form/add">
						<view class="patrol-item">
							<view class="item">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zhxj.png"></image>
								<text class="grid-text">智慧巡检</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</navigator>
					<navigator class="inline" url="/packageD/list/list?type=3">
						<view class="patrol-item">
							<view class="item">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wenti.png"></image>
								<text class="grid-text">问题整改单</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</navigator>
					<navigator class="inline" url="/packageD/list/list?type=2">
						<view class="patrol-item">
							<view class="item">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/dcjb.png"></image>
								<text class="grid-text">督查交办单</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</navigator>
					<navigator class="inline" url="/packageD/list/list?type=4">
						<view class="patrol-item">
							<view class="item">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/dcjb.png"></image>
								<text class="grid-text">超期整改单 </text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</navigator>
					<navigator class="inline" url="/packageD/analysis/analysis">
						<view class="patrol-item patrol-item-last">
							<view class="item">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png"></image>
								<text class="grid-text">统计分析</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</navigator>
				</view>
			</view>
<!-- 			<view class="grid-item1">
				<view class="item1-content">
					<u-grid border="1" :col="1" @click="onGrid1">
						<u-grid-item>
							<view class="item-image">
									<u-image lazyLoad :showLoading="true"
										src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png" width="35"
										height="35" mode="aspectFill"></u-image>
							</view>
							<text class="item-text">统计分析</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="item1-content2">
					<navigator class="inline" url="/packageD/list/list?assigned=1">
						<u-image lazyLoad :showLoading="true"
							src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/dcjb.png" width="25"
							height="25" mode="aspectFill"></u-image>
						<text class="item-text-ve">督察交办</text>
					</navigator>
					<navigator class="inline" url="/packageD/list/list?isProblem=1&isProblemName=有问题">
						<u-image lazyLoad :showLoading="true"
							src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wenti.png" width="25"
							height="25" mode="aspectFill"></u-image>
						<text class="item-text-ve">问题整改</text>
					</navigator>
				</view>
			</view>
			<view class="grid-item2">
				<u-grid :border="true" @click="onGrid2">	
					<u-grid-item>
						<view class="item-image">
							<u-image lazyLoad :showLoading="true"
								src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zhxj.png"
								width="35" height="35" mode="aspectFill"></u-image>
						</view>
						<text class="item-text">智慧巡检</text>
					</u-grid-item>
					<u-grid-item>
						<view class="item-image">
							<u-image lazyLoad :showLoading="true"
								src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png" width="35"
								height="35" mode="aspectFill"></u-image>
						</view>
						<text class="item-text">专项检查</text>
					</u-grid-item>
					<u-grid-item>
						<view class="item-image">
							<u-image lazyLoad :showLoading="true"
								src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/dbsx.png" width="35"
								height="35" mode="aspectFill"></u-image>
						</view>
						<text class="item-text">待办事项</text>
					</u-grid-item>
				</u-grid>
			</view> -->
		</view>
		<view class="home-item">
			<u-cell-group :border="false">
				<u-cell title="一周工作统计"></u-cell>
				<view class="work-state">
					<u-grid @click="onGrid3">
						<u-grid-item>
							<view class="circle-bar">
								<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
							</view>
							巡查次数
						</u-grid-item>
						<u-grid-item>
							<view class="circle-bar">
								<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
							</view>
							已整改
						</u-grid-item>
						<u-grid-item>
							<view class="circle-bar">
								<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
							</view>
							超期未整改
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
		<view class="home-item patrol">
			<navigator url="/packageD/notice/notice">
				<view class="patrol-tit">政策解读</view>
				<view class="patrol-tit2">智慧环保专业解决方案</view>
				<view class="patrol-tit3">规范流程 | 简化操作 | 方便快捷</view>
				<image class="patrol-img" mode="aspectFill" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/file_bg.png"></image>
				<!-- <image class="zc-img" mode="aspectFill" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zc.png"></image> -->
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getAlertCount,
		getWorkState
	} from '@/api'

	export default {
		data() {
			return {
				swiper: [
					'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/1.jpg',
					'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/2.jpg',
					'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/3.jpg'
				],
				chartData: {
					series: [{
						color: "#1890FF",
						data: 0.8
					}]
				},
				chartData1: {
					series: [{
						color: "#91CB74",
						data: 0.8
					}]
				},
				chartData2: {
					series: [{
						color: "#ff0000",
						data: 0.8
					}]
				},
				opts: {
					update: true,
					padding: undefined,
					title: {
						color: '#000',
						fontSize: 16
					},
					subtitle: false,
					extra: {
						arcbar: {
							type: "circle",
							width: 4,
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				opts1: {
					update: true,
					padding: undefined,
					title: {
						color: '#000',
						fontSize: 16,
						name: ''
					},
					subtitle: false,
					extra: {
						arcbar: {
							type: "circle",
							width: 4,
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				opts2: {
					update: true,
					padding: undefined,
					title: {
						color: '#000',
						fontSize: 16,
						name: ''
					},
					subtitle: false,
					extra: {
						arcbar: {
							type: "circle",
							width: 4,
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				count: 0
			}
		},
		onShow() {
			this.getState()
			this.getCount()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '污染防治综合监管',
				path: 'pages/index/index'
			}
		},
		methods: {
			getCount () {
				getAlertCount().then(res => {
					this.count = res.data.data
				})
			},
			getState () {
				getWorkState().then(res => {
					const total = res.data.data.rectify0 + res.data.data.rectify1 + res.data.data.xjCnt
					this.chartData.series[0].data = res.data.data.xjCnt / total
					this.opts.title.name = res.data.data.xjCnt || '0'
					this.chartData1.series[0].data = res.data.data.rectify1 / total
					this.opts1.title.name = res.data.data.rectify1 || '0'
					this.chartData2.series[0].data = res.data.data.rectify0 / total
					this.opts2.title.name = res.data.data.rectify0 || '0'
				}).catch(error => {
					uni.$u.toast(error)
				})
			},
			onPullDownRefresh() {
				this.getState()
				this.getCount()
				uni.stopPullDownRefresh()
			},
			onGridEnv (name) {
				if (name === 0) {
					uni.navigateTo({
						url: '/packageC/site-list/sitelist?name=' + '国控站点' + '&type=' + name
					})
				}
				if (name === 1) {
					uni.navigateTo({
						url: '/packageC/site-list/sitelist?name=' + '扬尘站点' + '&type=' + name
					})
				}
				if (name === 2) {
					uni.navigateTo({
						url: '/packageC/site-list/sitelist?name=' + '噪声站点' + '&type=' + name
					})
				}
				if (name === 3) {
					uni.navigateTo({
						url: '/packageE/warn/warninfo'
					})
				}
				if (name === 4) {
					uni.navigateTo({
						url: '/packageB/video/video'
					})
				}
				if (name === 5) {
					uni.navigateTo({
						url: '/packageE/soil/soil'
					})
				}
				if (name === 6) {
					uni.navigateTo({
						url: '/packageB/wash/wash'
					})
				}
			},
			// onGrid1(name) {
			// 	uni.navigateTo({
			// 		url: '/packageD/analysis/analysis'
			// 	})
			// },
			// onGrid2(name) {
			// 	if (name == 0) {
			// 		uni.navigateTo({
			// 			url: '/packageB/form/add'
			// 		})
			// 	}
			// },
			onGrid3 () {
				uni.navigateTo({
					url: '/packageD/week/week'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#home {
		background-color: $uni-bg-color-grey2;
		padding: 20upx;
		.home-item {
			margin-top: 20upx;
			background-color: #fff;
			box-shadow: 0 1px 0 rgba(0,170,255,0.05);
			border-radius: 10rpx;
		}
		.grid-content {
			box-shadow: none;
		}
		.patrol-item-box {
			// padding: 0 20upx;
			.patrol-item-in {
				background-color: $uni-bg-color-grey2;
				// padding-top: 20upx;
				overflow: hidden;
			}
			.patrol-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto 20upx;
				background-color: #fff;
				box-shadow: 0 1px 0 rgba(0,170,255,0.05);
				border-radius: 10rpx;
				height: 100upx;
				padding: 0 30upx;
				&.patrol-item-last {
					margin-bottom: 10upx;
				}
				.item {
					display: flex;
					justify-content: start;
					align-items: center;
				}
				.img-css {
					width: 60upx;
					height: 60upx;
					margin-right: 20upx;
				}
			}
		}
		.patrol {
			position: relative;
			background-color: #fff;
			padding: 30upx 40upx;
			.patrol-tit {
				width: 168upx;
				height: 48upx;
				line-height: 48upx;
				color: #fff;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
				border-radius: 40upx;
				text-align: center;
			}
			.patrol-tit2 {
				margin: 20upx 0 14upx;
				color: #188ee5;
				font-size: 30upx;
				font-weight: bold;
			}
			.patrol-tit3 {
				color: #999;
				font-size: 24upx;
			}
			.patrol-img {
				position: absolute;
				right: 70upx;
				top: 28upx;
				width: 160upx;
				height: 160upx;
			}
		}
		.gk {
			padding: 10upx 0 25upx;
			.item-image {
				position: relative;
				padding:  20upx 20upx 10upx;
			}
			/deep/.item-image .u-badge--warning {
				z-index: 9999;
			}
			.grid-text {
				margin-top: 10upx;
				padding-bottom: 20upx;
			}
		}
		.grid-content {
			.item-image {
				padding-top: 40upx;
			}

			.item-text {
				padding-bottom: 40upx;
				margin-top: 10upx;
			}

			.grid-item1 {
				border-bottom: 0.5px solid #dadbde;
				display: flex;
				justify-content: space-between;

				.item1-content {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					border-right: 0.5px solid #dadbde;
					padding: 20upx 0;
				}

				.item1-content2 {
					width: 50%;
					display: flex;
					flex-direction: column;

					.inline {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.item-text-ve {
							margin-left: 20upx;
						}
					}

					.inline:first-child {
						border-bottom: 0.5px solid #dadbde;
					}
				}
			}
		}
		.work-state {
			padding: 25upx 0;
		}
		.circle-bar {
			width: 140upx;
			height: 140upx;
		}
		.zc-img {
			width: 100%;
			height:200upx;
		}
	}
</style>
